{extend name="../application/index/view/index/base.html" /}

{block name="main-content"}
<div class="breadcrumbs" id="breadcrumbs">
    <style>
        /*表格标题栏文字居中*/
        th{
            text-align: center;
        }

    </style>
    <script type="text/javascript">
        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">房间管理</a>
        </li>
        <li class="active">房间信息</li>
    </ul><!-- .breadcrumb -->

    <div class="nav-search" id="nav-search">

    </div><!-- #nav-search -->
</div>
<div class="page-content">
    <div class="row" >
        <button id="roomInformation_query" class="btn btn-primary" style="height: 35px;float: right;margin-right: 70px;">
            查询信息</button>
        <input id="query_policeStation_roomcondition" type="text" data-toggle="modal" data-target="#police_station" style="width: 150px;height: 35px;padding-left: 5px;float: right;margin-left: 3px;"/>
        <span style="font-size: 14px;line-height: 35px;float: right;">派出所查询: </span>
        <input id="query_account_roomcondition" type="text" style="width: 100px;height: 35px;padding-left: 5px;float: right;margin-right: 10px;margin-left: 3px;"/>
        <span style="font-size: 14px;line-height: 35px;float: right;">账号查询: </span>
        <input type="checkbox" id="checkbox" name="checkbox" value="checkbox" style="width:20px;height: 20px;float: right;margin-right: 10px;margin-top: 8px;margin-left: 3px;">
        <span style="font-size: 14px;line-height: 35px;float: right;">可住房:</span>
        <table class="table table-striped table-hover table-bordered" id="think_rooms_table" style="text-align: center;margin-top: 50px;">
            <thead>
            <tr role="row">
                <th>房间编号</th>
                <th>房间地址</th>
                <th>房间数量</th>
                <th>已住房数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="think_rooms_tr">

            </tbody>
        </table>
        <div id="pagination_div"></div>
    </div><!-- /.row -->
    <!--房间修改框-->
    <div class="modal fade" id="revise_roomInformation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog ui-widget-content">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" >
                    </h4>
                </div>
                <div class="modal-body">

                    <div style="margin-top: 10px">
                        <span class="notice">房间编号：</span>
                        <input type="text" id="room_code" style="padding-left:16px;width: 300px;height: 40px;">
                        <span style="color: red">*</span>
                    </div>
                    <div style="margin-top: 10px">
                        <span class="notice">房间地址：</span>
                        <input type="text" id="room_address" style="padding-left:16px;width: 300px;height: 40px;">
                        <span style="color: red">*</span>
                    </div>
                    <div style="margin-top: 10px">
                        <span class="notice">房间数量：</span>
                        <input type="text" id="room_num" style="padding-left:16px;width: 300px;height: 40px;">
                        <span style="color: red">*</span>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="btn_roominfo_false">取消
                    </button>
                    <button type="button" class="btn btn-primary" id="btn_roominfo_true">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

</div><!-- /.page-content -->
<!--派出所选择框-->
<div class="modal fade" id="police_station" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-widget-content">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="police-modal-title">
                    选择派出所地址
                </h4>
            </div>
            <div class="modal-body">

                <div style="margin-top: 10px">
                    <span class="notice">省份：</span>
                    <select type="text" id="province" style="padding-left:16px;width: 300px;height: 40px;">

                    </select>
                </div>
                <div style="margin-top: 10px">
                    <span class="notice">城市：</span>
                    <select type="text" id="city" style="padding-left:16px;width: 300px;height: 40px;">
                    </select>
                </div>
                <div style="margin-top: 10px">
                    <span class="notice">辖区：</span>
                    <select type="text" id="region" style="padding-left:16px;width: 300px;height: 40px;">
                    </select>
                </div>
                <div style="margin-top: 10px">
                    <span class="notice">分局：</span>
                    <select type="text" id="policeStation" style="padding-left:16px;width: 300px;height: 40px;">
                    </select>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="btn_police_flase">取消
                </button>
                <button type="button" class="btn btn-primary" id="btn_police_true">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
    <!--添加信息模板-->
    <script id="tpl-roomInformation" type="text/html">
        <% for(var i in roomInformation) {%>
    <tr class="tr">
            <td class="room_code"><%= roomInformation[i]["room_code"] %></td>
            <td class="room_address"><%= roomInformation[i]["room_address"] %></td>
            <td class="room_num"><%= roomInformation[i].room_num %></td>
            <td class="room_number"><%= roomInformation[i]["sum"] %></td>
            <td>
            <button class="btn btn-primary btn-xs roomInformationDetails" value='<%= roomInformation[i]["account"] %>' data-toggle="modal">
                    <i class="fa fa-edit"></i> 详情</button>
            <button class="btn btn-info btn-xs roomInformationRevise" data-toggle="modal" data-target="#revise_roomInformation">
                <i class="fa fa-edit"></i> 修改</button>
            <button class="btn btn-danger btn-xs roomInformationDelete" data-toggle="modal">
            <i class="fa fa-trash-o"></i> 删除</button>
            </td>
            </tr>
    <% } %>
</script>
<!--详情信息-->
<!--添加信息模板-->
<script id="tpl-roomInformationDetails" type="text/html">
        <table class="table table-striped table-hover table-bordered" style="text-align: center;">
            <thead>
            <tr role="row">
                <th style="width: 30px">客户姓名</th>
                <th style="width: 30px">客户性别</th>
                <th style="width: 30px">随行人数</th>
                <th style="width: 30px">入住房数</th>
                <th style="width: 50px">入住时间</th>
            </tr>
            </thead>
            <tbody>
            <% for(var i in roomInformationDetails) {%>
            <tr class="tr">
                <td class="custom_name"><%= roomInformationDetails[i].custom_name %></td>
                <td class="custom_sex"><%= roomInformationDetails[i].custom_sex %></td>
                <td class="retinue"><%= roomInformationDetails[i].retinue%></td>
                <td class="room_number"><%= roomInformationDetails[i].room_number%></td>
                <td class="check_in_date"><%= roomInformationDetails[i].check_in_date %></td>
            </tr>
            <% } %>
            </tbody>
        </table>


</script>

<link href="__PUBLIC__/css/bootstrap-pagination.css" rel="stylesheet" />
<script src="__PUBLIC__/js/bootstrap-paginator.min.js"></script>

<script id="tpl-police_province" type="text/html">
    <option style="display: none;"></option>
    <% for(var i in police_province) {%>
    <option class="police_province"><%= police_province[i]["province"]%></option>
    <% }%>
</script>
<script id="tpl-police_city" type="text/html">
    <option style="display: none;"></option>
    <% for(var i in police_city) {%>
    <option class="police_city"><%= police_city[i]["city"]%></option>
    <% }%>
</script>
<script id="tpl-police_region" type="text/html">
    <option style="display: none;"></option>
    <% for(var i in police_region) {%>
    <option class="police_region"><%= police_region[i]["region"]%></option>
    <% }%>
</script>
<script id="tpl-police_policeStation" type="text/html">
    <option style="display: none;"></option>
    <% for(var i in police_policeStation) {%>
    <option class="police_policeStation"><%= police_policeStation[i]["policeStation"]%></option>
    <% }%>
</script>
<script>
    $(document).ready(function () {

        var limit = 10;
        var checkbox = false;
        $('#checkbox').click(function () {
            if(!checkbox){
                checkbox = true;
            }else{
                checkbox = false;
            }
        });

        //设置起始页和跳转点击的页面
        function initPagination(total) {
            var options = {
                currentPage: 1,
                totalPages: total,
                onPageClicked: function(e,originalEvent,type,page){
                    genTableContent(page);
                }
            };

            $('#pagination_div').bootstrapPaginator(options);
        }

        //查询设置起始页和跳转点击的页面
        function query_initPagination(total) {
            var options = {
                currentPage: 1,
                totalPages: total,
                onPageClicked: function(e,originalEvent,type,page){
                    query_genTableContent(page);
                }
            };

            $('#pagination_div').bootstrapPaginator(options);
        }

        //设置总页数
        function getPageLimit() {
            $.get('/index.php/index/Room/getPageLimit',
                {
                    account:$('#query_account_roomcondition').val(),
                    checkbox:checkbox
                },function (data) {
                if(data.code == 200){
                    var count = data.data;
                    var pageSum = Math.ceil(count / limit)==0?1:Math.ceil(count / limit);
                    initPagination(pageSum);
                }else{
                    initPagination(1);
                }
            });
        }

        //设置查询总页数

        function query_getPageLimit() {
            $.get('/index.php/index/Room/getPageLimit',{
                police_query:$("#query_policeStation_roomcondition").val(),
                account:$('#query_account_roomcondition').val(),
                checkbox:checkbox
            },function (data) {
                if(data.code == 200){
                    var count = data.data;
                    var pageSum = Math.ceil(count / limit)==0?1:Math.ceil(count / limit);
                    query_initPagination(pageSum);
                }else{
                    query_initPagination(1);
                }
            });
        }

        //分页刷新
        function genTableContent(page) {
            var param = {
                page:page,
                limit:limit,
                checkbox:checkbox
            };
            $.get('/index.php/index/Room/select',param,function (data) {
                var space = $("#think_rooms_table").find('.think_rooms_tr');
                space.empty();
                var html = template('tpl-roomInformation', {
                    roomInformation:data.data
                });
                $(".think_rooms_tr").append(html);

            });

        }

        //查询分页刷新
        function query_genTableContent(page) {
            var param = {
                page:page,
                limit:limit,
                account:$('#query_account_roomcondition').val(),
                police_query:$("#query_policeStation_roomcondition").val(),
                checkbox:checkbox
            };
            $.get('/index.php/index/Room/select',param,function (data) {
                var space = $("#think_rooms_table").find('.think_rooms_tr');
                space.empty();
                var html = template('tpl-roomInformation', {
                    roomInformation:data.data
                });
                $(".think_rooms_tr").append(html);
            });

        }

        // 修改房间信息
        $(document).on("click",".roomInformationRevise",function () {
            $('.modal-title').html('修改房间信息');
            $('#room_code').attr("readonly","readonly");
            var varible = $(this).parent().parent();
            $('#room_code').val(varible.find('.room_code').html());
            $('#room_address').val(varible.find('.room_address').html());
            $('#room_num').val(varible.find('.room_num').html());
        });

        //确认修改房间
        $('#btn_roominfo_true').click(function () {
                $.post('/index.php/index/Room/update',
                    {
                        room_code: $('#room_code').val(),
                        room_address: $('#room_address').val(),
                        room_num: $('#room_num').val()
                    }, function (data) {
                        genTableContent();
                        layer.msg('修改成功!');
                        $('#revise_roomInformation').modal('hide');
                    });
            initPagination();
        });

        //删除房间
        $(document).on('click','.roomInformationDelete',function () {
            var delete_room = $(this).parent().parent().find('.room_code').html();
            layer.confirm('是否确认删除？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                $.post('/index.php/index/Room/delete',
                    {
                        room_code: delete_room
                    },function () {
                        layer.msg('删除成功');
                        genTableContent();
                    })
            })

        });

        //给省份select传值
        function giveProvince() {
            $.get('/index.php/index/Room/get_province',function (data) {

                var html = template('tpl-police_province', {

                    police_province: data.data
                });
                $("#province").empty();
                $("#province").append(html);
            })
        }

        //给城市select传值
        function giveCity() {
            $.post('/index.php/index/Room/get_city',{province: $("#province").val()},function (data) {

                var html = template('tpl-police_city', {

                    police_city: data.data
                });
                $("#city").empty();
                $("#city").append(html);
            })
        }

        //给辖区select传值
        function giveRegion() {
            $.post('/index.php/index/Room/get_region',{city: $("#city").val()},function (data) {

                var html = template('tpl-police_region', {

                    police_region: data.data
                });
                $("#region").empty();
                $("#region").append(html);
            })
        }

        //给分局select传值
        function givePoliceStation() {
            $.post('/index.php/index/Room/get_policeStation',{region: $("#region").val()},function (data) {

                var html = template('tpl-police_policeStation', {

                    police_policeStation: data.data
                });
                $("#policeStation").empty();
                $("#policeStation").append(html);
            })
        }

        //change事件
        $("#province").change(function () {
            giveCity();
        });

        $("#city").change(function () {
            giveRegion();
        });

        $("#region").change(function () {
            givePoliceStation();
        });

        //点击派出所查询input框
        $('#query_policeStation_roomcondition').click(function () {
            $('#province').val('');
            $('#city').val('');
            $('#region').val('');
            $('#policeStation').val('');
            $("#city").empty();
            $("#region").empty();
            $("#policeStation").empty();
        });

        //确认派出所
        $('#btn_police_true').click(function () {
            var province = $('#province').val();
            var city = $('#city').val();
            var region = $('#region').val();
            var policeStation = $('#policeStation').val();
            if(city == ''){
                var police_province = $("#query_policeStation_roomcondition").val(province);
            }
            else if(region == ''){
                $("#query_policeStation_roomcondition").val(city);
            }
            else if(policeStation == ''){
                $("#query_policeStation_roomcondition").val(region);
            }
            else{
                $("#query_policeStation_roomcondition").val(policeStation);
            }
            $('#police_station').modal('hide');
        });

        //点击查询
        $('#roomInformation_query').click(function () {
            var placeInfo = $("#query_policeStation_roomcondition").val();
                $.get('/index.php/index/Room/select',{account:$('#query_account_roomcondition').val(),police_query:placeInfo,checkbox:checkbox},function (data) {
                    var space = $("#think_rooms_table").find('.think_rooms_tr');
                    space.empty();
                    var html = template('tpl-roomInformation', {
                        roomInformation:data.data
                    });
                    $(".think_rooms_tr").append(html);
                });
             if(($('#query_account_roomcondition').val()) == null  && $('#query_policeStation_roomcondition').val() == null){
                    genTableContent(1);
                    getPageLimit();
            }
             query_genTableContent(1);
             query_getPageLimit();
        });

        //详情点击
        $(document).on('click','.roomInformationDetails',function () {
            var info = $(this).parent().parent().find('.room_code').html();
            var landlord = $(this).val();
            var detail = info + '房间在住订单信息' +'<span style="margin-left: 50px;">' + '房东：' + landlord +'</span>';
            $.post('/index.php/index/Room/getOrderInfo',{room_code:info},function (data) {
                if(data.code == 400){
                    layer.msg('该房间暂未住人')
                }else {
                    var html = template('tpl-roomInformationDetails', {
                        roomInformationDetails:data.data
                    });
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['600px', '400px'], //宽高
                        content: html
                    });
                    $('.layui-layer-title').html(detail);
                }
            });
        });
        //初始化函数
        $('#query_policeStation_roomcondition').attr('readonly','readonly');
        genTableContent(1);
        getPageLimit();
        giveProvince();
    });
</script>
{/block}

